<template>
	<view class="deal-content">
		<!-- 商品首页 -->
		<view v-if="index==0">
			<!-- 搜索导航 -->
			<u-navbar bgColor="#f9f9f9" height="52" :safeAreaInsetTop="true" :placeholder="true">
				<view
					class="u-nav-slot"
					slot="left"
				>
				<view style="display: flex;">
					<u-icon name="home" size="28" customStyle="margin-right: 16rpx;" @click="toHome()"></u-icon>
					<u-search 
						:clearabled="true"
						:animation="true"
						v-model="keywork"
						placeholder="请输入要搜索的关键字"
						@search="searchAll()"
						shape="round">
					</u-search>
				</view>
					
				</view>
			</u-navbar>
			<!-- 分类滑动 -->
			<u-scroll-list :indicator="true" indicatorColor="#fff" indicatorActiveColor="#f56c6c" v-if="classifyList.length>0">
				<view v-for="(item, index) in classifyList" :key="item.id" class="classify-dist">
					<text :class="currentIndex==item.id?'classify-color':''" @click="classifyClick(item.id)">{{item.classifyName}}</text>
				</view>
			</u-scroll-list>
			<!-- 页面内容 -->
			<view class="goods_list" v-if="postList.length>0">
				<view class="goods_item" @click="navigator(item.post.id)" v-for="(item, index) in postList" :key="item.post.id">
					<image
						:src="item.post.imgUrls[0]"
						mode=""></image>
					<view class="price">
						<text>￥{{item.post.amountOfCurrentPrice}}</text>
						<text v-if="item.post.amountOfOriginalPrice">
							￥{{item.post.amountOfOriginalPrice}}
						</text>
					</view>
					<view class="name">
						<u--text lines="2"  size="13" :text="item.post.content"></u--text>
					</view>
					<u-row customStyle="padding-left: 8rpx;">
						<u-col span="2"><u-avatar size="24" :src="item.user.avatar"></u-avatar></u-col>
						<u-col span="8"><u--text :text="item.user.nickname" :lines="1" :size="12"></u--text></u-col>
					</u-row>
				</view>
			</view>	
			<u-empty
					v-else
					text="暂未搜索到发布的内容哦!"
					textSize="20"
					textColor="#8f99a3"
					iconColor="blue"
					iconSize="160"
					marginTop="100"
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"
			>
			</u-empty>
			<!-- 返回顶部组件 -->
			<u-back-top
				:scroll-top="scrollTop" 
				icon="http://106.13.239.254/icon/go_back.png"
				:iconStyle="iconStyle"
				top="400"
				customStyle="opacity: 0.9;">
			</u-back-top>
		</view>
		
		<!-- 消息列表页面 -->
		<view v-else class="isOver">
			<!-- 消息 -->
			<u-navbar bgColor="#f9f9f9" height="50"
				title="消息"
				:safeAreaInsetTop="true" 
				:placeholder="true">
				<view
					class="u-nav-slot"
					slot="left"
				></view>
			</u-navbar>
			<chat></chat>
			<!-- <msgList :messageList="messageList" @removeMsg="remove"></msgList> -->
		</view>
		<view class="isOver" v-if="flag">
			<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
		</view>
		<!-- 底部tabar -->
		<myTabbar @itemClick='tab'></myTabbar>

		<u-toast ref="uToast"></u-toast>
	</view>
	
</template>

<script>
	import {getPostsList, getClassifyList, recordPostWatch} from '../../utils/api.js'
	import myTabbar from '@/components/tabbar/my-tabbar.vue'
	//import msgList from '@/components/msg-list/msg-list.vue'
	import chat from '../chat/chat.vue'
	let WebIM = require("../../utils/WebIM")["default"];
	export default {
		data() {
			return {
				index: 0,
				flag: false,
				keywork: '',
				loginUserName: '',
				show: false,
				currentIndex: 0,	//分类选中标识
				postList: [],
				scrollTop: 0,
				iconStyle: {
					width: '50rpx',
					height: '50rpx',
				},
				query: {pageNo: 1, pageSize: 10, type: 3, classifyId: 0},
				total: 0,
				classifyList:[],
			}
		},
		components: {
		    myTabbar,
			//msgList,
			chat
		},
		onReachBottom(){
			console.log('onReachBottom ...')
			//下拉加载
			if(!this.flag){
				this.query.pageNo++
				this.getList()
			}else {
				this.flag = true
			}
		},
		onLoad(option) {
			setTimeout(()=>{
				this.loginIm()
			}, 500)
			this.dealClassifyList()
			this.getList()
		},
		//监听下拉是否出现返回顶部组件
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			dealClassifyList(){
				getClassifyList().then(res => {
					let obj = {...res[0]}
					obj.id = 0
					obj.classifyName = '全部'
					this.classifyList.push(obj)
					this.classifyList = this.classifyList.concat(res)
				})
			},
			getList(){
				getPostsList({params: this.query}).then(res => {
					for(let i=0; i<res.list.length; i++){
						res.list[i].post.imgUrls = res.list[i].post.imgUrls.split(",")
					}
					this.postList = this.postList.concat(res.list)
					//console.log('this.postList', this.postList)
					this.total = res.total
					if(res.list.length == 0) this.flag = true
				}).catch(err => {
					getApp().globalData.toast[1].message = '加载数据失败'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
			},
			open() {},
		    close() {
				this.show = false
		    },
			loginIm(){
				const pwd = uni.getStorageSync("imToken")
				let phoneNumber = getApp().globalData.phoneNumber || JSON.parse(uni.getStorageSync("userInfo")).phoneNumber
				let userId = "im" + phoneNumber
				console.log('imToken', pwd)
				console.log('userId', userId)
				uni.setStorage({
				  key: "myUsername",
				  data: userId,
				  //data: 'im13479515153'
				});
				getApp().globalData.conn.open({
					user: userId,
					pwd: pwd,
					// user: 'im13479515153',
					// pwd: '7fbefd5415ac4d548be22a72835b157e',
					//accessToken: token,
				});
			},
			scrolltolower() {},
			searchAll(){
				uni.$u.route({
					type: 'to',
					url: `pages/goods-search/goods-search`,
					params: {
						keyword: this.keywork
					},
				})
			},
			//tabbar切换
			tab(name) {
				//console.log('name', name)
				if(name == 'p'){
					uni.navigateTo({
						url: '/pages/publish-idle/publish-idle'
					})
					return;
				}
				this.scrollTop = 0
				this.index = name
				this.flag = false
				setTimeout(()=>{
					//滚动条重新开始
					uni.pageScrollTo({
						scrollTop: 20, //距离页面顶部的距离
						duration: 50
					});
				}, 300)
				
				//if (name === 1) return uni.$u.toast('请您先登录')

			},
			//移除一条消息
			remove(index){
				//console.log('remove index', index)
				//删除数组索引index的位置1个元素
				this.messageList.splice(index, 1);
			},
			toHome(){
				//跳转任意页面, 并关闭其它所有页面
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			navigator(id){
				//记录浏览的商品
				recordPostWatch({postId: id}).then(res=>{}).catch(err=>{})
				uni.navigateTo({
					url:`/pages/goods-details/goods-details?id=${id}`
				})
			},
			classifyClick(id){
				//文本颜色切换
				this.currentIndex = id;
				//此处根据分类id请求分类商品
				this.query.classifyId = id
				this.query.pageNo = 1
				this.postList = []
				this.getList()
				this.flag = false
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.deal-content {
		padding-top: 20rpx;
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		.box-post-content {
			margin: 16rpx 20rpx;
			padding: 18rpx 10rpx 30rpx 16rpx;
			border-radius: 16rpx;
			background-color: #fff;
			.picture-content {
				margin-top: 20rpx;
			}
		}
		.u-demo-block__content {
		    display: flex;
			justify-content: left;
			margin-top: 10rpx;
			.u-tag,.u-tag-class {
				margin-left: 6rpx;
				width: 80rpx;
			}
		}
		.classify-dist{
			margin: 10px 20px 2px 8px;
			white-space: nowrap;
		}
		.classify-color{
			color: #2979ff;
		}
		.goods_list {
			padding: 0 15rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.goods_item {
				background-color: #fff;
				width: 355rpx;
				margin: 10rpx 0;	
				padding-top: 20rpx;
				padding-bottom: 10rpx;
				border-radius: 10rpx;
				image {
					width: 85%;
					height: 200px;
					display: block;
					margin: auto;
				}
		
				.price {
					color: #b50e03;
					font-size: 36rpx;
					width: 94%;
					margin-left: 8rpx;
					margin-top: 32rpx;
					text:nth-child(2) {
						color: #ccc;
						font-size: 28rpx;
						margin-left: 17rpx;
						text-decoration: line-through;
					}
				}
		
				.name {
					font-size: 28rpx;
					line-height: 50rpx;
					padding-top: 10rpx;
					padding-bottom: 8rpx;
					width: 94%;
					margin-left: 10rpx;
				}
			}
		}
		
		.isOver {
			padding: 18rpx 0;
			margin-bottom: 60px;
		}
		
	}

</style>
